<template>
  <div class="page-cont">
    <van-nav-bar
      title="存梁管理"
      left-arrow
      @click-left="$router.go(-1)"
    />
    <div class="list">
      <van-field
        v-model="data.beamNo"
        label="梁号"
        readonly
        input-align="right"
        placeholder="请输入梁号"
      />
      <action-select
        v-model="data.beamStatus"
        title="状态"
        :list="beamStatusOptions"
      />
      <time-select
        v-model="data.gmtFinish"
        title="生产完成时间"
      />
      <time-select
        v-model="data.gmtStorage"
        title="存梁时间"
      />
      <van-cell
        title="存梁位置"
        value="内容"
        class="input"
      >
        <input
          type="text"
          v-model="data.locationArea"
          placeholder="存梁区域"
        >-
        <input
          type="number"
          v-model="data.locationFloor"
          placeholder="存梁层数"
        >
      </van-cell>
      <time-select
        v-model="data.gmtOut"
        title="出厂时间"
      />
    </div>
    <div class="btn">
      <van-button
        type="info"
        block
        @click="submit"
      >
        提交
      </van-button>
    </div>
  </div>
</template>

<script>

export default {
  name: "StoragePage",
  data() {
    return {
      beamStatusOptions: [{
        'label': '待存梁',
        'value': 0
      }, {
        'label': '已存梁',
        'value': 1
      }, {
        'label': '已出厂',
        'value': 2
      }],
      data: {},
    };
  },
  created() {
    this.data = JSON.parse(this.$route.query.json);
    console.log(this.data)
  },
  watch: {
    beamStatus() {
      this.$refs.list.refresh()
    }
  },
  methods: {
    async onLoad(page, done) {
      // beamStatus
      let res = await this.api.GET_STORAGE_LIST({pageNo: page, pageSize: 10, beamStatus: this.beamStatus})
      this.list.push(...res.list)

      // 触发加载完成 大于50模拟全部加载完成
      done(res.pageNo === res.totalPage)
    },
    async submit() {
      this.$toast.loading({message: "加载中...", forbidClick: true});
      await this.api.UPDATE_STORAGE_DATA(this.data);
      this.$toast.clear();
      this.$router.back();
    }
  }
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
.list {
  flex: 1;
  height: 0;
  overflow: hidden;
  overflow-y: auto;
  ::v-deep {
    .van-cell {
      &.input {
        .van-cell__value {
          flex: 2;
          width: 0;
          display: flex;
          align-items: center;
          input {
            flex: 1;
            width: 0;
            margin: 2px 5px;
            text-align: center;
            color: #333;
            &::placeholder {
              color: #e3e3e3;
            }
          }
        }
      }
    }
  }
}
</style>
